<template>
    <div 
        ref="boxfull" 
        id="bear_content" 
        :style="{ padding }"
        :class="ischange ? 'changebj' : ''" 
        class="container flex flex-column h_full justify-between" 
    >
        <template v-if="isScreen">
            <div class="pull_cont cur" v-if="$ipad" @click="handlemouseenter">
                <img class="pull_img" :src="ischange ? background : background1" />
            </div>
            <el-tooltip effect="dark" content="退出全屏" placement="bottom" :hide-after="500" v-else>
                <div class="pull_cont cur" @click="handlemouseenter">
                    <img class="pull_img" :src="ischange ? background : background1" />
                </div>
            </el-tooltip>
        </template>

        <div>
            <slot name="title"></slot>
        </div>

        <div class="cont_part flex_column_between h_full" :class="ischange ? 'tans' : ''" v-if="type==0">
            <slot></slot>
        </div>

        <div class="cont_part1 flex_column_between h_gull" v-else>
            <slot></slot>
        </div>
        
        <div class="cont_footer" v-if="!ischange">
            <Footer></Footer>
        </div>
    </div>
</template>

<script>
import Footer from '@/views/layout/Footer.vue'

    export default {
        name:'bear_content',
        components:{
            Footer
        },

        data() {
            return {
                type:0,
                isScreen:false,             /** 显示退出全屏按钮 */
                ischange:false,             /** 是否为上课页 */
                isFullscreen:false,         /** 是否全屏 */
                padding:'2.0rem 2.0rem 0',
                background1:require('@/assets/img/quit.png'),
                background:require('@/assets/img/quit_2.png')
            }
        },

        computed:{
            menuSate(){
                return this.$store.state.user.menuState
            },
        },

        watch:{
            menuSate(newObj) {
                if(!newObj){
                    this.isScreen=false
                    this.padding='2.0rem 2.0rem 0'
                }
            },

            $route: {
                handler: function(val){
                    if (val.path=='/sele') {
                        this.type=1;
                    } else {
                        this.type=0
                    };

                    if(val.path=='/work/test'||val.path=='/reading/remember'){
                        this.ischange=true
                        sessionStorage.setItem('change',true)
                        this.padding="2rem 11.4rem 0"

                    }else{
                        this.ischange=false
                        sessionStorage.setItem('change',false)
                        if(this.isFullscreen){
                            this.padding="8.4rem 11.4rem 0"
                        }else{
                            this.padding="2.0rem 2.0rem 0"
                        }

                    };
                },
                deep: true
            }
        },

    mounted() {
        this.onresize()
        if (JSON.parse(sessionStorage.getItem('change'))){
            this.ischange = true;
        };

        this.ipadResize()
        window.addEventListener('resize', this.onresize.bind(this));
        if(this.$store.state.user.isFull&&!this.isFullscreen) {
            this.toggleFullScreen();
        };


        // this.$nextTick(() => {
        //     this.$refs.boxfull.addEventListener('fullscreenchange', () => {
        //         this.onresize();
        //     });
        // });
    },

    /** 卸载组件前 */
    beforeDestroy() {
        window.removeEventListener('resize', this.onresize.bind(this));
    },

    unmounted() {
        window.removeEventListener('resize', this.onresize.bind(this));
    },

    methods:{
        setFullState(state) {
            state = state === 'close' ? 1 : 0;
            this.isScreen = !state;
            this.$store.commit('user/setFull', !state);
            this.$store.commit('user/setmenu', !state);
            this.$store.commit('user/setfullState', state);
            this.padding = !state ? '8.4rem 11.4rem 0' : '2.0rem 2.0rem 0';
        },

        handlemouseenter(){
            'exitFullscreen' in document && document?.exitFullscreen?.();
            this.setFullState('close');
        },

        toggleFullScreen() {
            if (this.isFullScreenFn()) {
                this.ipadResize();

            } else {
                this.setFullState('open');
                this.$nextTick(() => {
                    this.$refs.boxfull.requestFullscreen();
                });
            };
        },

        closeFullScreen() {
            if(!this.isFullScreenFn()) {
                this.setFullState('close');
            };
        },

        ipadResize() {
            if (this.$ipad) {
                this.closeFullScreen();
                this.onresize();
            };
        },

        /** 监听是否全屏状态 */
        onresize() {
            if (['/login', '/login/register'].includes(this.$route.path)) return;
            this.closeFullScreen();
            /** 利用屏幕分辨率和window对象的内高度来判断兼容IE */
            const winFlag = window.innerHeight === window.screen.height;

            /** 利用window全屏标识来判断 -- IE无效 */
            const isFull = this.isFullScreenFn();

            if (isFull === undefined) {
                this.isFullscreen = winFlag;

            } else {
                this.isFullscreen = winFlag || isFull;
            };

            this.isFullscreen = winFlag;
            if (winFlag) {
                this.isScreen = true;
            };
            
            if (!winFlag) {
                this.$store.commit('user/setFull', false);
                this.$store.commit('user/setmenu', false);
                this.$store.commit('user/setfullState', 1);
            };
        },

        isFullScreenFn() {
            return !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || document.mozFullScreenElement);
        }
    }
}
</script>

<style lang="scss" scoped>
.h_full{
    height: calc(100% - 8.4rem);
}
.h_gull{
    height: calc(100% - 8.4rem);
}
.h_full1{
    height: 100% ;

}
.container{
    height: 100%;
    overflow: hidden;
    background-image: url(@/assets/img/bj.png);
    background-size: 100% 100%;
    position: relative;
    .pull_cont{
        position: absolute;
        right: 4.2rem;
        top: 4.2rem;
    }
    .pull_img{
        width: 2.8rem;
        height: 2.8rem;
        &:hover{
            content: url(@/assets/img/quit_1.png);
        }
    }
    .pull_text{
        position: absolute;
        top: 2rem;
        left: 11.4rem;
    }
    .cont_part{
        width: 100%;
        background: #fff;
        border-radius: 2.0rem;
    }
    .cont_part1{
        width: 100%;
        height: calc(100% - 8.4rem);

        background: #fff;
        border-radius: 2.0rem;
    }
    .cont_footer{
        height: 8.4rem;
    }
}
.el-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #aaa;
    font-size: 1.4rem;
  }
.changebj{
    background-image: url(@/assets/newImg/bg.png);
}
.tans{
    background: transparent !important;
    height: 100%;
}
</style>
